<template>
  <div class="dashboard-container">
    <div><p style="font-size: larger">团队管理</p></div>
    <el-divider></el-divider>
    <!--  第二栏开始  -->
    <el-row>
      <el-col style="margin-top: 20px" :span="5">
        <span><el-button @click="batchDeletion" size="small" type="danger">批量删除</el-button></span>
        <span style="margin-left: 10px"><el-button @click="addPeopleDialogVisible = true" size="small" class="proButton">添加人员</el-button></span>
      </el-col>
      <el-col :offset="13" :span="6" style="margin-top: 15px">
        <el-input placeholder="请输入用户账号" v-model="inputSelect" class="input-with-select">
          <el-button slot="append" @click="search" icon="el-icon-search"></el-button>
        </el-input>
      </el-col>
    </el-row>
    <!--  第二栏结束  -->
    <!--  表格开始  -->
    <el-table
      :cell-style="tablestyle"
      :header-cell-style="tablestyle"
      :data="viewData"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="45">
      </el-table-column>
      <el-table-column
        label="账号"
        prop="userId">
      </el-table-column>
      <el-table-column
        label="名称"
        prop="userName">
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="角色">
        <template slot-scope="scope">
          <span v-if="scope.row.role === '1' || '2' || '3' ">{{ checkList[scope.row.role] }}</span>
          <span v-if="scope.row.role === '12' ">{{ checkList[1] }},{{ checkList[2] }}</span>
          <span v-if="scope.row.role === '13' ">{{ checkList[1] }},{{ checkList[3] }}</span>
          <span v-if="scope.row.role === '23' ">{{ checkList[2] }},{{ checkList[3] }}</span>
          <span v-if="scope.row.role === '123'">{{ checkList[1] }},{{ checkList[2] }},{{ checkList[3] }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="加入时间"
        prop="joinTime">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
      >
        <template slot-scope="scope">
          <div v-if="!(scope.row.founderId === scope.row.userId)">
          <span @click="editRole(scope.row)"><el-link type="primary" :underline="false">修改角色</el-link></span>
          <el-divider direction="vertical"></el-divider>
          <span @click="sureDelete(scope.row)"><el-link type="danger" :underline="false">删除</el-link></span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        class="pagination"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pagesize"
        prev-text="上一页"
        next-text="下一页"
        :page-sizes="[5, 7, 10, 15]"
        layout="total, sizes, prev, pager, next"
        :total="total">
      </el-pagination>
    </div>
    <!--  表格和分页结束  -->

    <!--  下面都是弹出框的内容  -->
    <!--  没有选择人时批量删除调用的弹出框  -->
    <el-dialog
      :visible.sync="deleteDialogVisibleFail"
      width="30%">
      <span>
        <el-result icon="error" title="请选择要删除的数据">
          <template slot="extra">
            <el-button type="danger" size="medium" @click="deleteDialogVisibleFail = false">确认</el-button>
          </template>
        </el-result>
      </span>
    </el-dialog>
    <!--  选择了人时批量删除调用的弹出框  -->
    <el-dialog
      :visible.sync="deleteDialogSuccess"
      width="30%">
      <span>
        <el-result icon="warning" title="确定要删除？">
          <template slot="extra">
            <el-button type="danger" size="medium" @click="dialogDelete">确认</el-button>
            <el-button size="medium" @click="deleteDialogSuccess = false">取消</el-button>
          </template>
        </el-result>
      </span>
    </el-dialog>
    <!--  删除调用的弹出框  -->
    <el-dialog
      :visible.sync="deleteDialogVisibleSuccess"
      width="30%">
      <span>
        <el-result icon="warning" title="确定要删除？">
          <template slot="extra">
            <el-button type="danger" size="medium" @click="dialogSureDelete">确认</el-button>
            <el-button size="medium" @click="deleteDialogVisibleSuccess = false">取消</el-button>
          </template>
        </el-result>
      </span>
    </el-dialog>
    <!--  添加人员弹出框  -->
    <el-dialog
      title="添加人员"
      :visible.sync="addPeopleDialogVisible"
      width="30%">
      <el-row>
        <el-col :span="9">请输入您想搜索的用户</el-col>
        <el-col :offset="10" :span="4">
          <el-link type="success" :underline="false" @click="getInvitCode">项目邀请码</el-link>
        </el-col>
      </el-row>
      <el-input style="margin-top: 20px" placeholder="请输入你想搜索的用户" v-model="addPeopleDialogInput">
        <template slot="prepend"><el-icon name="search"></el-icon></template>
        <template slot="append"><el-button class="proButton" @click="searchUser">搜索</el-button></template>
      </el-input>
      <div v-if="joinUser.userId" class="joinSelect">
        <span>{{ joinUser.userId }}</span><span>{{ joinUserName }}</span>
        <span>
          <el-select style="width: 30%;" size="mini" v-model="joinSelectRole" @change="joinSelectRoleMethod" placeholder="选择用户角色">
            <el-option value="1" label="项目经理"></el-option>
            <el-option value="2" label="开发工程师"></el-option>
            <el-option value="3" label="测试工程师"></el-option>
          </el-select>
        </span>
        <span><el-button class="proButton" size="mini" @click="inviteToJoin">邀请加入</el-button></span>
      </div>

      <el-dialog
        width="30%"
        title="项目邀请码"
        :visible.sync="proCodeVisible"
        append-to-body>
        <span style="font-size: 140%">{{InvitCode}}</span>
      </el-dialog>
    </el-dialog>
    <!--  修改角色的弹出框  -->
    <el-dialog
      title="修改角色"
      :visible.sync="modifyRoleDialogVisible"
      width="30%">
      <el-checkbox-group v-model="checkListSelect">
        <el-checkbox label="项目经理"></el-checkbox>
        <el-checkbox label="开发工程师"></el-checkbox>
        <el-checkbox label="测试工程师"></el-checkbox>
      </el-checkbox-group>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editRoleCancel">取 消</el-button>
        <el-button type="primary" @click="editRoleSure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

  import {
    batchDeletion,
    deletePeople,
    findUserInfo,
    getTeam,
    joinProjectByInvite,
    modifyRole,
    searchUser
  } from '@/api/team'
  import { mapGetters } from 'vuex'
  import { formatTime } from '@/utils/validate'
  import { getProjectInvitCode } from '@/api/project'
  import { setProjectId } from '@/utils/auth'

  export default {
    name: 'teamManagement',
    data() {
      return {
        pagesize: 5,                //分页每一页的数目
        currentPage: 1,             //标记当前的在第几页
        total: 0,
        inputSelect: '',            //搜索框绑定的值
        viewData: [],                //表格显示的数据绑定的值
        multipleSelection: [],       //表格勾选出来的数组
        checkList: ["","项目经理","开发工程师",'测试工程师'],               //修改角色的数组
        checkListSelect: [],
        deleteDialogVisibleFail: false,       //批量删除无选项时的弹出框
        deleteDialogSuccess: false,           //批量删除有选项时的弹出框
        deleteDialogVisibleSuccess: false,       //删除时的弹出框
        addPeopleDialogVisible: false,         //添加人员弹出框
        modifyRoleDialogVisible: false,        //修改角色的弹出框
        proCodeVisible: false,                 //项目邀请码弹出框
        addPeopleDialogInput: '',              //添加人员弹出框里的搜索框绑定的值
        judgDelete: '',                       //判断是否执行删除的值
        InvitCode: '',                            //项目邀请码
        recordingRole: '',                      //记录用户角色
        recordingUserId: '',                     //记录用户id
        joinSelectRole: '',
        joinUser: {
          'userId':'',
          'proId': '',
           role: '',                      //经理邀请加入时绑定的角色值
        },
        joinUserName: '',
      }
    },
    computed:{
      ...mapGetters(['projectId'])
    },
    methods: {
      //经理邀请加入时绑定的角色值改变方法
      joinSelectRoleMethod(val){
        this.joinUser.role = val
      }, //经理邀请成员点击邀请按钮时调用的方法
      inviteToJoin(){
        this.joinUser.proId = this.projectId
        joinProjectByInvite(this.joinUser).then(res =>{
          this.$router.go(0)
          this.$message({type:'success',message:res.msg})
        })
      },//在邀请页面的搜索方法
      searchUser(){
        let params = {id:this.addPeopleDialogInput}
        findUserInfo(params).then(res =>{
          if (res.msg !== '')
            this.$message("没有该用户")
          this.joinUser.userId = res.data.id
          this.joinUserName = res.data.userName
        })
      },

      //搜索框点击搜索调用的方法
      search() {
        let params = {'proId':this.projectId,'userId':this.inputSelect}
        searchUser(params).then(res =>{
          this.viewData = [];
          this.viewData[0] = res.data
          if (res.msg !== '成功')
            this.$message(res.msg)
        })
      },
      //批量删除调用的方法
      batchDeletion() {
        if (this.multipleSelection.length){
          this.deleteDialogSuccess = true
        }else{
          this.deleteDialogSuccess = true
        }
      },//批量删除调用确定的方法
      dialogDelete(){
        let userIds = []
        let i = 0
        this.multipleSelection.forEach(res =>{
          userIds[i] = res.userId
          i++
        })
        let params = {'proId':this.projectId,'userIds':userIds}
        batchDeletion(params).then(res =>{
          this.$router.go(0)
          this.$message(res.msg)
        })
      },
      //表格前面的选择框方法
      handleSelectionChange(val) {
        console.log(val)
        this.multipleSelection = val
      },
      //分页条改变时调用的方法
      handleCurrentChange(val) {
        this.currentPage = val
        this.getProjectUserInfo()
      },

      //确定删除调用的方法
      dialogSureDelete(){
        let params = {'userId':this.judgDelete.userId,'proId':this.projectId}
        deletePeople(params).then(res =>  {
          this.$router.go(0)
          this.$message(res.msg)
        })
        this.deleteDialogVisibleSuccess = false;
      },
      //点击删除调用的方法
      sureDelete(row){
        this.judgDelete = row;
        this.deleteDialogVisibleSuccess = true;
      },

      //点击修改角色执行的方法
      editRole(row) {
        this.changeCheckListSelect(row.role)
        this.recordingRole = row.role
        this.recordingUserId = row.userId
        this.modifyRoleDialogVisible = true
      },
      //修改角色弹出框取消按钮的方法
      editRoleCancel(){
        this.changeCheckListSelect(this.recordingRole)
        this.modifyRoleDialogVisible = false
      },
      //修改角色弹出框确定按钮的方法
      editRoleSure(){
        let role = ''
        this.checkListSelect.forEach(roles => {
          switch (roles) {
            case '项目经理': role+='1';break;
            case '开发工程师': role+='2';break;
            case '测试工程师': role+='3';break;
          }
        })
        if (role === '132' || role === '321' || role === '213' || role ==='231' || role === '312')
          role = '123'
        if(role === '21')
          role = '12'
        if(role === '32')
          role = '23'
        if(role === '31')
          role = '13'
        let params = {'proId':this.projectId,'role': role, 'userId':this.recordingUserId }
        modifyRole(params).then(res => {
          this.$router.go(0)
          this.$message({type:'success',message:res.msg})
        })
        this.modifyRoleDialogVisible = false
      },

      //修改每页数量多少时调用
      handleSizeChange(val){
        this.pagesize = val
        this.getProjectUserInfo()
      },

      //获取项目邀请码的按键
      getInvitCode(){
        this.loading = true
        getProjectInvitCode(this.projectId).then(res =>{
          this.InvitCode = res.data
        })
        this.proCodeVisible = true
        this.loading = false
      },

      //居中样式的返回方法
      tablestyle() {
        return 'text-align:center;'
      },
      changeCheckListSelect(val){
        this.checkListSelect = []
        switch (val) {
          case '1' : this.checkListSelect[0] = "项目经理";break;
          case '2' : this.checkListSelect[0] = "开发工程师";break;
          case '3' : this.checkListSelect[0] = "测试工程师";break;
          case '12' : this.checkListSelect[0] = "项目经理";this.checkListSelect[1] = "开发工程师";break;
          case '13' : this.checkListSelect[0] = "项目经理";this.checkListSelect[1] = "测试工程师";break;
          case '23' : this.checkListSelect[1] = "开发工程师";this.checkListSelect[2] = "测试工程师";break;
          case '123' : this.checkListSelect[0] = "项目经理";this.checkListSelect[1] = "开发工程师";this.checkListSelect[2] = "测试工程师";break;
        }
      },
      //获取用户信息
      getProjectUserInfo(){
        let params = {"current":this.currentPage,"size":this.pagesize}
        getTeam(this.projectId,params).then(res =>{
          for (let i = 0; i < res.data.records.length; i++){
            res.data.records[i].joinTime = formatTime(res.data.records[i].joinTime)
          }
          this.viewData = res.data.records
          this.total = res.data.total
        })
      }
    },
    mounted() {
      this.getProjectUserInfo()
    }
  }
</script>

<style lang="scss" scoped>
  .pagination {
    margin-top: 20px;
    margin-right: 10px;
    text-align: right;

    ::v-deep .el-pagination__jump {
      float: left;
    }
  ;

    ::v-deep .el-pagination__total {
      float: left;
    }
  ;

    ::v-deep .el-pagination__sizes {
      float: left;
    }
  }
  .joinSelect{
    margin-top: 30px;
  }
  .joinSelect span{
    margin-left: 19px;
  }
</style>
